<template>
    <el-form
        :model="form"
        ref="basicInfo"
        label-width="160px"
        class="ccui-form"
    >
        <el-col
            v-for="(item, index) in basicInfo"
            :span="item.colSpan || 12"
            :key="index"
        >
            <el-form-item
                :label="item.label + '：'"
                :class="{remarkClass:item.remarkClass}"
                :title="basicInfoObj[item.value]"
            >{{ basicInfoObj[item.value] }}
            </el-form-item>
        </el-col>
    </el-form>
</template>

<script>
export default {
    name: "basicInfoDetail",
    props: {
        basicInfo: {
            type: Array,
            default: () => []
        },
        basicInfoObj: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            form: {}
        }
    },
    mounted() {
        console.log(this.basicInfo, 'basicInfo');
    }
}
</script>

<style scoped lang="scss">
.remarkClass {
    /deep/ .el-form-item__content {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        white-space: normal;
        word-break: break-all;
        word-wrap: break-word !important;
    }
}
</style>